<template>
  <view>
    <u-navbar title="银行卡"></u-navbar>
    <view class="container">
      <view
        v-if="card.src"
        class="bank-card"
        :style="'background-image:url(' + `${getImageUrl(card.src)}` + ')'"
      >
        <u-icon class="logo" :name="`${getImageUrl(card.logo)}`" mode="" size="80"></u-icon>
        <view class="card-info">
          <view class="" style="font-size: 32rpx">
            {{ card.cardName }}
          </view>
          <view class="">
            {{ card.realName }}
          </view>
          <p style="font-size: 36rpx">{{ card.cardNo }}</p>
        </view>
      </view>
      <view v-else style="background-color: #909399; border-radius: 20rpx">
        <view class="card-info">
          <view class="" style="font-size: 32rpx">
            {{ card.cardName }}
          </view>
          <view class="">
            {{ card.realName }}
          </view>
          <p style="font-size: 36rpx">{{ card.cardNo }}</p>
        </view>
      </view>
    </view>
    <view style="margin: 20rpx">
      <view class="submit-btn btn" @click="remove"> 解绑银行卡 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card: {}
    }
  },
  onLoad(optiions) {
    this.card = JSON.parse(optiions.card)
    console.log()
  },
  methods: {
    remove() {
      uni.dialog.confirm('温馨提示', '解绑银行卡？', () => {
        this.$u.get('/app-api/pay/bank/delete?id=' + this.card.id).then((res) => {
          if (res.code === 0) {
            this.$u.toast('解绑成功')
            setTimeout(function () {
              uni.navigateBack()
            }, 1500)
          } else {
            this.$u.toast(res.msg)
          }
        })
      })
    }
  }
}
</script>

<style>
@import url(../../style/btn.css);
page {
  background: #f5f5f5;
}
.container {
  padding: 30rpx;
}
.bank-card {
  position: relative;
  background-size: 690rpx 240rpx;
  width: 690rpx;
  height: 240rpx;
  margin-bottom: 20rpx;
}
.logo {
  position: absolute;
  top: 60rpx;
  left: 30rpx;
}
.card-info {
  margin: 60rpx 139rpx;
  color: #fff;
  line-height: 55rpx;
}
.btn {
  /* margin: 20rpx; */
  background-color: #d6d6d6;
  color: #333;
}
</style>
